<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <multiInput v-model="form.inventory_move_order_no" placeholder="移库单" class="w-50"></multiInput>
        <multiInput v-model="form.sku" placeholder="SKU" class="w-50"></multiInput>
        <VGroup>
          <el-select class="selectClass" v-model="form.timeRange.type" style="max-width: 120px">
            <el-option v-for="item in timeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model="form.timeRange.value" type="daterange" range-separator="至" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss" :default-time="defaultTime()" style="max-width: 300px" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <el-button class="ml-auto" @click="handleExport"><svg-icon icon-class="import" />导出</el-button>
      </template>
    </VTable>
    <derived-center ref="DerivedCenterRef"></derived-center>

  </VPage>
</template>
<script setup name="InventoryInventory-move-order" lang="jsx">
import { ref, reactive } from 'vue'
import { queryInventoryMOveList } from './api'
import multiInput from '@/components/multiInput'
import { ElMessage } from 'element-plus';


const timeOption = [
  { label: "操作时间", value: "create_time" },
  { label: "审核时间", value: "verify_time" },
]

const tableRef = ref()
const tableOptins = reactive({
  rowConfig: { height: 60 },
  formConfig: {
    data: {
      timeRange: { type: 'create_time', value: [], range: true },
    }
  },
  columns: [
    {
      type: "seq", title: '序号', width: 80
    },
    {
      field: 'inventory_move_order_no', title: '移动单号',width: 220
    },
    {
      field: 'warehouse_name', title: '仓库名称'
    },
    {
      field: 'sku', title: 'SKU'
    },
    {
      field: 'origin_location_code', title: '原货位'
    },
    {
      field: 'new_location_code', title: '新货位'
    },
    {
      field: 'move_num', title: '移库数量'
    },
    {
      field: 'create_user', title: '操作人'
    },
    {
      field: 'create_time', title: '操作日期'
    },
  ],
  proxyConfig: {
    seq: true,
    props: {
      result: 'data',
      total: 'total',
    },
    ajax: {
      query: async ({ page, form }) => {
        const res = await queryInventoryMOveList({ ...form, ...page })
        return new Promise(function (resolve) {
          resolve({
            data: res.data,
            total: res.total
          })
        })
      }
    }
  }
})

const DerivedCenterRef = ref()
const handleExport = (val) => {
  let condition = tableRef.value.getQueryForm()
  DerivedCenterRef.value.open({
    id: 44,
    tag_name: 'wms',
    condition
  })
}
</script>